<template>
  <div>
    <el-container>
      <el-header id="header" height="100px"></el-header>
      <el-main id="main" style="height:360px">
        <el-row :gutter="20">
          <el-col :span="16"><div class="grid-content bg-purple">
            <img
            style="max-width: 100%; max-height: 100%"
            v-if="form.img"
            :src="form.img"
            />
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple" style="padding-top:1px;font-size:20px;text-align:left;line-height:50px">
            <div style="margin-left:5%;margin-top:1%;max-width:90%;max-height:15%;color:#FFF;">{{color}}</div>
            <div style="margin-left:5%;margin-top:1%;max-width:90%;max-height:15%;color:#FFF;">{{name}}</div>
            <div style="margin-left:5%;margin-top:1%;max-width:90%;max-height:15%;color:#FFF;">{{year}}</div>
            <div style="margin-left:5%;margin-top:1%;max-width:90%;max-height:50%;color:#FFF;font-size:5px;text-align:left;line-height:20px;overflow:hidden">{{talk}}</div>
          </div></el-col>
        </el-row>
      </el-main>
      <el-footer id="footer" height="100px" style="display:flex;justify-content : space-between">
        <div  style="color:#fff;line-height:100px;margin-left:20px">此处仅供功能展示，图片类型支持PNG、JPG、JPEG、BMP，大小不超过2M</div>
        <div @click="openFile" class="imgStyle">点击上传</div>
        <div style="margin-top:25px;display:none">
          <input
          ref="file"
          style="display:none"
          multiple
          type="file"
          accept="image/*"
          @change="changeFile"
          /> 
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import api from "@/api";
export default {
  name: "lookCar",
  components: {},
  data() {
    return {
      color:'白色',
      talk:'保时捷911是由德国保时捷公司所生产的跑车。由费迪南德·亚历山大·保时捷(Ferdinand Alexander Porsche)所设计的作品。从1963年诞生以来，共经历了八代车型，因其独特的风格与极佳的耐用性享誉世界，保时捷911系列是整个保时捷乃至于整个德国整个世界最传奇的车型之一，同时也是中后置引擎跑车的代表作之一。',
      name:'保时捷911',
      car:'',
      year:'2016-2017',
      dialogFormVisible:false,
      form:{
        _id:0,
        img:'http://localhost:3000/uploads/1521762267056705536.png',
        type:'category',
        url:'',
        title:''
      }
    }
  },
  methods: {
    openFile(){
      let fileElement = this.$refs.file
      fileElement.click()
    },
    
    changeFile(e) {
      let files = e.target.files;
      let formData = new FormData();
      formData.append("file", files[0]);
      this.$http({
        url: "/upload",
        method: "POST",
        data: formData,
      }).then((res) => {
        var path = res.img.path.split("\\");
        this.color = res.color
        this.talk = res.talk
        this.name = res.name
        this.year = res.year
        path = path[0] + "/" + path[1];
        if (res.img.path) this.form.img = api.baseURL + "/" + path;
        if (res.talk==null)  this.talk = '该车型暂无简介'
        if (res.car!=null) this.car = res.car
        console.log(this.car);
      });
    },
  },
  created() {},
  mounted() {},
};
</script>

<style>
#header, #footer {
    background-color: rgb(26,26,26);
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  

  #main {
    background-color: rgb(52,52,52);
    color: rgb(52,52,52);
    text-align: center;
    line-height: 160px;
  }
  

.imgStyle {
  margin-top: 10px;
  width: 180px;
  height:80px;
  background-color: rgb(0,115,235);
  color: aliceblue;
  font-size: 20px;
  text-align: center;
  line-height: 80px;
  margin-right: 20px;
}


/* 横向布局 */
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    height: 319px;
  }
</style>